【第163 期】iconfont

请选择搜索范围

张福涛lu70kpm9 / 新技术应用 / 【第163 期】iconfont——阿里巴巴矢量图...

选择朗读音色

亲切女声

稳重女声

成熟男声

选择朗读倍速

0.75倍

1倍

1.5倍

选择循环方式

单篇循环

定期推送各学科优质的数字学习工具，敬请期待！

本期编辑：冯孟坭

引言

iconfont是国内一款功能强大且图标内容十分丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。图标库包含四个大类，官方图标库、单色图标库、多色图标库、所有图标库；支持图标项目管理和团队协作；用户还可以参照绘图规则制作和上传矢量图标；支持用户在iconfont网页下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

工具简述

类别：多媒体制作工具

网站：http://www.iconfont.cn/

平台需求：Web网页版

软件语言：中文/英文

是否免费：免费   

软件功能：矢量图标下载、图标项目管理、图标绘制、代码应用

入门指南

iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师可以将设计的icon素材上传，供大家下载多种格式的素材。也可以将icon转换为字体格式，方便前端工程师使用。

网站首页介绍

iconfont首页上半部分是主功能区，顶部左侧的菜单栏包括图标库、图标管理、帮助、在线字体和网站活动；顶部右侧包括用户中心、上传图标、语言切换和用户下载。首页中间长圆角矩形部分显示了平台现有的图标数量，点击可以搜索图标。首页下半部分展示了平台内经典的矢量图标库。

用户登录

在iconfont上下载图标，首先需要使用账号登录，iconfont支持非阿里用户使用GitHub和微博账号登录。有更多需求的用户需要完善个人信息以体验更多的功能。

搜索图标

用户在首页的搜索框内键入想要搜索的内容，点击搜索框下方的按钮即可进入到图库包含的所有图标界面。

比如以“安卓”为关键字进行搜索，显示所有的图标集合，将鼠标悬停在某个图标上可以加入到购物车进行批量下载、加入到我的收藏、直接单个图标下载。

批量图标下载

用户将所需的图标加入到购物车后，批量下载时所有图标的风格一致，选择图标的颜色和图标大小（N*N像素），选择图标格式（SVG、AI、PNG三种格式），选择后以压缩包形式下载并存储到用户文件夹中。当然用户也可以选择任一单个的图标进行下载，同样的需要选择图标颜色、大小和格式。

项目管理与代码应用

“项目”是帮助团队协同合作的共享模块，创建项目后，视觉同学上传icon，交互/产品同学可以自由下载图标，前端同学可以将图标以字体格式添加至代码，支持三种格式代码使用。

用户在iconfont.cn可以下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。Android和iOS开发时可以直接使用单个icon(SVG或PNG格式)，也可以直接引入字体应用。在这里由于主要介绍平台资源，不做进一步的代码应用方面的介绍，有需要的人员可以参照帮助中心的代码应用板块。

PPT效果展示

阿里巴巴矢量图标库相比于如iconfinder、freepik、Sketch App Sources等图标素材库最大的优点就是素材更加丰富、下载过程更简单。教师或教学人员可以从iconfont平台获取到海量的图标素材，并应用到实际教学场景中。以PPT为例，使用iconfont能让你的PPT演示文档更加吸人眼球和具有艺术感。

应用小结

用户在iconfont可以单个下载和批量下载icon，下载的icon格式包括常用的 SVG，AI，PNG，同时还可以对下载的素材颜色进行自定义。批量下载时，将喜欢的icon加入购物车，再点击网站右上角的购物车，就可以批量下载了，同时还可以批量下载对应的icon代码，供Web前端，iOS，Android平台的工程师使用。

感谢您的参与

来和我们一起持续探讨适用于教学的数字学习工具吧，如果您有推荐的数字学习工具，欢迎推荐给我们哦，期待您的参与！

来自： 张福涛lu70kpm9 > 《新技术应用》

推一荐：发原创得奖金，“原创奖励计划”来了！

0条评论

发表

请遵守用户 评论公约

使用阿里巴巴图标库生成iconfont字体图标

使用阿里巴巴图标库生成iconfont字体图标。

干货：实用网站推荐（六）

干货：实用网站推荐（六）QiuZiTi:求字体图片找字体下载网 www.qiuziti.com.QiuZiTi:求字体图片找字体下载网是一个非常实用的字体查询网...

免费素材下载网站

免费素材下载网站。提供：矢量图、psd源文件、图片素材、网页素材、3D模型素材、手机APP素材、ppt、画册、图标热门主流素材免费下载服务，千图网以其独特的定位和全新免费运营模式，处于素材网站领先地...

《艺妓回忆录》章子怡：你这么努力，活该被别人羡慕！

她说：“我学英语不仅仅是为了拍电影，而是为了能够真正在国际上立足并继续发展。现代年轻人应该要具备掌握英语的能力，懂得讲英语就多...

为网页添加高清SVG ICON解决方案（上）

为网页添加高清SVG ICON解决方案（上）上面的demo分别在不同浏览器下的效果，第一行用的是iconfont实现，下面三行都是用的SVG实现的图标...

不用到处找图标了，这5个网站

图标网站哪家强？我们再三建议过，图标尽量选择 svg 或 ai 矢量格式，这样它的可编辑性会非常高。用 AI 打开 svg 或 ai 矢量格式的文件...

ICONFONT在APP中的使用

ICONFONT在APP中的使用阿里IconFont平台http://www.iconfont.cn/这里是阿里巴巴UED部门开发的IconFont平台，目前阿里系的重量级产品都在使用，里面有很多资源可供使用。IconFont虽然看起来是图标，实际...

教程（219）懒人图标快速获得法

教程（219）懒人图标快速获得法。图标颜色修改起来也很简单，点击菜单栏右侧的小色轮按钮，则会弹出颜色设置面板，默认情况下以预设色板...

系统整理！PPT模板、图标、图表、地图…等等素材该去哪下载？

PPT模板、图标、图表、地图…高质量的PPT模板去哪找？而且除了PPT模板以外，网站上面还有很多高质量的PPT图表！51PPT模板网也是国内一个...

关于H5工程师那些日常必需工具

IconFont:阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库，提供矢量图标下载、在线存储、格式...

¥.00

微信或支付宝扫码支付：

开通即同意《个图VIP服务协议》

正在支付中，请勿关闭二维码！

微信支付后，该微信自动注册为你的个人图书馆账号

付费成功，还是不能使用？

复制成功！

绑定帐号，享受特权

恭喜你成为个图VIP！ 在打印前，点击“下一步”观看2个提示

微信支付查找“商户单号”方法： 1.打开微信app，点击消息列表中和“微信支付”的对话 2.找到扫码支付给360doc个人图书馆的账单，点击“查看账单详情” 3.在“账单详情”页，找到“商户单号” 4.将“商户单号”填入下方输入框，点击“恢复VIP特权”，等待系统校验完成即可。

支付宝查找“商户订单号”方法： 1.打开支付宝app，点击“我的”-“账单” 2.找到扫码支付给个人图书馆的账单，点击进入“账单详情”页 3.在“账单详情”页，找到“商家订单号” 4.将“商家订单号”填入下方输入框，点击“恢复VIP特权”，等待系统校验完成即可。

已经开通VIP，还是不能打印？

请通过以下步骤，尝试恢复VIP特权 第1步在下方输入你支付的微信“商户单号”或支付宝“商家订单号” 第2步点击“恢复VIP特权”，等待系统校验完成即可

如何查找商户单号？

正在查询...

订单号过期！ 该订单于2020/09/09 23:59:59支付，VIP有效期：2020/09/09 23:59:59至2020/09/11 23:59:59！如需使用VIP功能，建议重新开通VIP

支付成功！

已获得“发送到手机”权限！

微信扫码，在手机上查看选中内容

确定复制刚才选中的内容？

微信扫码，在手机上查看选中内容

微信扫码，在手机上查看选中内容

复制成功！

¥.00

微信或支付宝扫码支付：

开通即同意《个图VIP服务协议》

正在支付中，请勿关闭二维码！

自动续费¥12/月，可随时取消 

开通即同意《连续订阅服务协议》|《个图VIP服务协议》

支付确认

1. 请在手机上打开的页面进行支付； 2. 如支付完成，请点击“支付完成”。